<template>
    <div>
      <el-row>
        <el-col><h3 style="margin:30px;">| 录入基本信息</h3></el-col>
      </el-row>
      <el-row>
        <el-col :span="14" :offset="2" style="padding-top:50px;">
          <el-form  :model="InfoForm" label-width="80px" :rules="InfoRules" ref="InfoRef" label-position="left">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="InfoForm.name"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="Id">
          <el-input v-model="InfoForm.Id"></el-input>
        </el-form-item>
        <el-form-item label="所在部门" prop="department">
           <el-select v-model="InfoForm.department">
             <el-option v-for="(item,index) in departments" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" prop="position">
          <el-input v-model="InfoForm.position"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="InfoForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="education">
           <el-select v-model="InfoForm.education">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="专科" value="专科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="籍贯" prop="hometown">
          <el-input v-model="InfoForm.hometown"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="InfoForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- <el-row  style="padding:20px 0;"  :gutter="20">
        <el-col :span="5" :offset="1">员工姓名：{{employeeInfo.name}}</el-col>
        <el-col :span="6">员工工号：{{employeeInfo.Id}}</el-col>
        <el-col :span="6">所在部门：{{employeeInfo.department}}</el-col>
        <el-col :span="6">职务：{{employeeInfo.position}}</el-col>
      </el-row>
      <el-row style="padding:20px 0;"  :gutter="20">
        <el-col :span="5" :offset="1">手机号：{{employeeInfo.phone}}</el-col>
        <el-col :span="6">学历：{{employeeInfo.education}}</el-col>
        <el-col :span="6">籍贯：{{employeeInfo.hometown}}</el-col>
        <el-col :span="6">住址：{{employeeInfo.address}}</el-col>
      </el-row>
      <el-row>
        <el-col :offset="1">
            <el-button @click="editDialogVisible = true" type="primary"  style="margin-top:50px;">修改</el-button>
        </el-col>
      </el-row> -->

      <!-- 修改信息对话框 -->
      <!-- <el-dialog title="信息修改" :visible.sync="editDialogVisible">
        <el-form :model="employeeInfo">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.name" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="工号" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.Id" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.department" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职务" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.position"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学历" :label-width="formLabelWidth">
                <el-select v-model="employeeInfo.education">
                    <el-option label="专科" value="shanghai" selected></el-option>
                    <el-option label="本科" value="beijing"></el-option>
                    <el-option label="硕士" value="beijing"></el-option>
                    <el-option label="博士" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.hometown" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="住址" :label-width="formLabelWidth">
                <el-input v-model="employeeInfo.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
     </el-dialog> -->

 </div>
</template>

<script>
import {getDepartments,inputInfo} from '@/api/employee'

export default {
    data(){
      return{
        departments:[],
        editDialogVisible: false,
        formLabelWidth: '120px',
        InfoForm:{
          name:'',
          Id:'',
          department:'',
          position:'',
          phone:'',
          education:'本科',
          hometown:'',
          address:''
        },
        InfoRules:{ 
          name: [
            { required: true, message: '姓名', trigger: 'blur' },
          ],
          Id: [
            { required: true, message: '工号', trigger: 'blur' },
          ],
          department: [
            { required: true, message: '部门', trigger: 'blur' },
          ],
          position: [
            { required: true, message: '职务', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '不合法的手机号', trigger: 'blur' }
          ],
          education: [
            { required: true, message: '学历', trigger: 'blur' },
          ],
          hometown: [
            { required: true, message: '籍贯', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '住址', trigger: 'blur' },
          ],
        }
      }
    },
    mounted(){
      this.getDepartments()
    },
    methods:{
      //获取所有部门
      async getDepartments(){
        const res = await getDepartments()
        if(res.code==200){
          this.departments=res.data.departments
        }
      },
      submit(){
        this.$refs.InfoRef.validate(async valid=>{
          if(!valid) return 
          const res =await inputInfo(this.InfoForm)
          if(res.code==200){
            this.$message.success("提交成功")
            this.$refs.InfoRef.resetFields()
          }
        })
      },
      reset(){
         this.$refs.InfoRef.resetFields()
      }
    }
}
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.font-center{
    text-align: center;
}
</style>